<template>
	<view class="addGroup">
		<view class="addForm">
			<uni-forms ref="baseForm" :modelValue="form" label-width="100">
				<uni-forms-item>
					<view class="alignCenter" style="display: flex;justify-content: center;">
						<uni-singleimg :fileUrl="form.cover" v-if="form.cover" @delPic="delPic"></uni-singleimg>
						<view @click="uploadFileClick"
							style="width:340rpx;height:200rpx;background: #fff;border-radius: 14rpx;border:1px solid #f0f0f1;">
							<view style="text-align: center;margin-top: 5rpx;font-size: 64rpx;font-weight: 700;color: #666666">
								+</view>
							<view style="font-size: 28rpx;color: #333333;text-align: center;margin-top: 25rpx;font-weight: 700;">
								小组封面</view>
							<view style="font-size: 24rpx;color: #666666;text-align: center;margin-top: 14rpx;">
								尺寸要求：500*300</view>
						</view>
					</view>
				</uni-forms-item>
				<view
					style="width: 100%;height: 192rpx;background-color: #fff;border:1px solid #f0f0f1;border-radius: 10rpx;margin-bottom: 25rpx;">
					<uni-forms-item>
						<view style="display: flex;margin-top: 30rpx;">
							<uni-icons custom-prefix="iconfont" type="icon-shuxie-" size="18" color="#797979"
								style="margin-right: 20rpx;"></uni-icons>
							<input class=" font14" maxlength="20" placeholder="取个名字吧!" placeholder-class="font14 color333"
								v-model.trim="form.name">
						</view>
					</uni-forms-item>
					<uni-forms-item>
						<view style="display: flex;margin-top: 15rpx;">
							<uni-icons custom-prefix="iconfont" type="icon-shuxie-" size="18" color="#797979"
								style="margin-right: 20rpx;"></uni-icons>
							<input class="font14" maxlength="50" placeholder="小组简介" placeholder-class="font14 color333" cols="30"
								rows="10" v-model.trim="form.introduction">
						</view>
					</uni-forms-item>
				</view>
				<view style="display: flex;align-items: center;margin-bottom: 20rpx;">
					<view style="width: 12rpx;height: 34rpx;border-radius: 12rpx;background: #F7DD5E;margin-right: 10rpx;">
					</view>
					<text style="font-weight: 700;font-size: 28rpx;">选择所属圈子（可同时选）</text>
				</view>
				<view class="circle">
					<template v-for="(item,index) in itemArr">
						<uni-mdlist :listData="itemArr" @clickItem="clickItem"></uni-mdlist>
					</template>
				</view>
				<view style="display: flex;align-items: center;margin-top: 40rpx;margin-bottom: 15rpx;">
					<view style="width: 12rpx;height: 34rpx;border-radius: 12rpx;background: #F7DD5E;margin-right: 10rpx;">
					</view>
					<text style="font-weight: 700;font-size: 28rpx;">收费模式</text>
				</view>
				<view class="chargeMode">
					<radio-group @change="changeCharge">
						<!-- <template v-for="(item, index) in chargeArr">
							<label class="uni-list-cell uni-list-cell-pd flex alignCenter font12" v-if="index<2"
								:key="index">
								<view class="">
									<radio :value="item.value" color="#F7DD5E" :checked="item.value === form.charge"
										style="transform:scale(0.7)" />
								</view>
								<view class="font14">{{item.title}}</view>
							</label>
						</template> -->
						<template v-for="(item, index) in chargeArr">
							<label class="uni-list-cell uni-list-cell-pd flex alignCenter font12" :key="index">
								<view class="">
									<radio :value="item.value" color="#F7DD5E" :checked="item.value === form.charge"
										style="transform:scale(0.7)" />
								</view>
								<view class="font14">{{item.title}}</view>
								<view v-if="index ==2" class="flex alignCenter">
									<view class="flex alignCenter" >
										<input class="font14 bold priceInput" type="number" v-model.trim="form.amount">
										<text class="font14">元</text>
									</view>
									<label class="flex alignCenter">
										<checkbox-group @change="changeCheckBox">
											<checkbox color="#797979" class="font14" value="1" :checked="isTeam" style="transform:scale(0.7)"
												@change="changeCheckBox" />
										</checkbox-group>
										<text class="font14">拼团</text>
									</label>
									<view class="flex alignCenter">
										<input class="font14 bold priceInput" type="number" maxlength="5" v-model="form.chargeCount"
											@focus="changeCheckBox('focus')">
										<text class="font14">人</text>
									</view>
									<view class="flex alignCenter">
										<input class="font14 bold priceInput" type="number" maxlength="3" v-model="form.chargeDiscount"
											@focus="changeCheckBox('focus')">
										<text class="font14">折</text>
									</view>
								</view>
							</label>
						</template>
					</radio-group>
				</view>
			</uni-forms>
		</view>
		<view class="publishStyle" @click="toActivityHomePage"><i class="iconfont icon-fabu"></i>确定</view>
		<!-- 成功提示 -->
		<uni-mdshowmodule v-if="showTip" :type="`groupSucc`" @commonLayerOper="commonLayerOper"></uni-mdshowmodule>
	</view>
</template>

<script>
	import {
		chooseImg,
		uploadFile,
		previewImg
	} from "@/utils/common.js"
	import {
		addGroup
	} from "@/api/send.js"
	import {
		money
	} from "@/utils/verification.js"
	export default {
		data() {
			return {
				form: {
					cover: '',
					name: '',
					introduction: '',
					charge: '0',
					amount: '',
					chargeCount: '',
					chargeDiscount: '',
					circles: []
				},
				isTeam: false,
				showTip: false,
				chooseCircle: [],
				// 单选数据源
				chargeArr: [{
						title: '免费无需审核',
						value: '0'
					}, {
						title: '免费需要审核',
						value: '1'
					},
					{
						title: '收费',
						value: '2'
					},
				],
				itemArr: [{
					title: '选择圈子',
					icon: '/static/image/setting/major.png',
					subTitle: '',
					val: ''
				}],
				groupId: ''
			};
		},
		onLoad() {
			uni.removeStorageSync('chooseCircle')
			uni.removeStorageSync('cropUrl')
		},
		onShow() {
			// 回显圈子个数
			this.chooseCircle = uni.getStorageSync('chooseCircle') || []
			this.itemArr[0].val = `已选${this.chooseCircle.length}个`
			if (uni.getStorageSync('cropUrl')) {
				let path = [uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				uploadFile(path).then((successFile) => {
					this.form.cover = successFile.url
				}).catch((err) => {
					console.log('err', err)
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('chooseCircle')
			uni.removeStorageSync('cropUrl')
		},
		methods: {
			uploadFileClick() {
				console.log('111')
				chooseImg(1).then((file) => {
					uni.navigateTo({
						url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url=' + file[0] + '&ratio=4/3'
					})
				})
			},
			// 更改收费模式
			changeCharge(e) {
				console.log('val==', e)
				this.form.charge = e.detail.value
				if (this.form.charge < 2) {
					this.isTeam = false
					this.form.amount = ''
					this.form.chargeCount = ''
					this.form.chargeDiscount = ''
					return
				}
			},
			// 删除图片
			delPic() {
				this.form.cover = ''
			},
			// 
			changeCheckBox(e) {
				console.log('e', e)
				if (e == 'focus') {
					this.isTeam = true
				} else {
					this.form.charge = e.detail.value.length > 0 ? '2' : '0'
					this.isTeam = e.detail.value.length > 0 ? true : false
				}
			},
			// 确定
			toActivityHomePage() {
				console.log('点击')
				if (!this.form.cover) {
					uni.showToast({
						title: '请上传小组封面',
						icon: 'none'
					})
					return
				} else if (!this.form.name) {
					uni.showToast({
						title: '请输入小组名字',
						icon: 'none'
					})
					return
				} else if (!this.form.introduction) {
					uni.showToast({
						title: '请输入小组简介',
						icon: 'none'
					})
					return
				} else if (this.form.charge == 2 && !money.test(this.form.amount)) {
					uni.showToast({
						title: '请输入费用',
						icon: 'none'
					})
					return
				} else if (this.form.charge == 2 && this.isTeam && !this.form.chargeCount) {
					uni.showToast({
						title: '请输入拼团人数',
						icon: 'none'
					})
					return
				} else if (this.form.charge == 2 && this.isTeam && !this.form.chargeDiscount) {
					uni.showToast({
						title: '请输入折扣',
						icon: 'none'
					})
					return
				} else {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					let circle = []
					this.chooseCircle.forEach((item) => {
						let newP = {
							objectId: item.objectId || item.subjectCode,
							objectName: item.circleName
						}
						circle.push(newP)
					})
					this.form.circles = circle
					console.log('参数', this.form)
					addGroup(this.form).then((res) => {
						uni.hideLoading()
						if (res.code == 100000) {
							this.groupId = res.data
							this.showTip = true
						}
					}).catch((err) => {
						uni.hideLoading()
					})
				}
			},
			// 提示框按钮操作
			commonLayerOper(type) {
				uni.removeStorageSync('chooseCircle')
				this.showTip = false
				if (type == 'addActivity') {
					// uni.showToast({
					// 	title:'去添加活动',
					// 	icon:'none'
					// })
					uni.navigateTo({
						url: '/pages/mine/activity/activity?from=group&id=' + this.groupId
					})
				} else if (type == 'no') {
					console.log('id====', this.groupId)
					uni.navigateTo({
						url: '/pages/send/group/groupDetail/groupDetail?id=' + this.groupId
					})
				}
				Object.assign(this.$data, this.$options.data())
			},
			// 选择圈子
			clickItem() {
				uni.navigateTo({
					url: '/pages/school/circle/circle?circle=' + JSON.stringify(this.chooseCircle)
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F6F8F6;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/public.scss";

	::v-deep .uni-forms-item__label {
		align-items: flex-start;
		height: auto;
		margin-right: 20rpx;
	}

	.addGroup {
		padding: 30rpx 30rpx 150rpx;
		box-sizing: border-box;
	}

	.addForm {
		// background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		// box-shadow: 0 0 18rpx 0 rgba(0, 0, 0, .3);
	}

	.publishStyle {
		position: fixed;
		z-index: 10;
		bottom: 30rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.inputBox {
		border: 1px solid $bordercolor;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.textareaBox {
		border: 1px solid $bordercolor;
		padding: 15rpx 20rpx;
		width: 100%;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.chargeMode {
		.priceInput {
			border: 1px solid $bordercolor;
			width: 70rpx;
			padding: 0 10rpx;
			height: 50rpx;
			line-height: 50rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin: 0 10rpx 0 15rpx;
			text-align: center;
		}

		.uni-list-cell {
			margin: 0 0 20rpx;
		}

		.uni-list-cell:last-child {
			margin: 0;
		}
	}

	.circle {
		::v-deep .listItem {
			padding: 30rpx 0;
		}
	}
</style>